<template>
  <div>
     <el-tree  :data="departList"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      >
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <!-- data 当前行的数据 -->
            
             <span >{{ data.name }}</span>
              <span>
                <el-link>{{data.managerName}}</el-link>
           
                 <el-dropdown style="margin: 0 20px;"
                 @command="handleCommand">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{sta:'add',id:data.id}">添加子部门</el-dropdown-item>
                    <el-dropdown-item :command="{sta:'edit',id:data.id,pid:data.pid}">编辑部门</el-dropdown-item>
                    <el-dropdown-item :command="{sta:'del',id:data.id}">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>

       </span>
     </el-tree>
     <el-dialog title="添加部门" :visible.sync="departFlag" with="50%">
        <el-form label-width="100px" :rules="rules" :model="departForm"
        ref="departForm">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="departForm.name"></el-input>
          </el-form-item>
           <el-form-item label="部门编码" prop="code">
            <el-input v-model="departForm.code"></el-input>
          </el-form-item>
           <el-form-item label="部门负责人" prop="managerId">
              <el-select  v-model="departForm.managerId">
                <el-option v-for="item in mangerList"
                :key="item.id" :value="item.id" :label="item.username">
                  {{item.username}}
                </el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="部门描述" prop="introduce">
            <el-input type="textarea" v-model="departForm.introduce"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div>
              <el-button type="primary" @click="toSave">确定</el-button>
              <el-button type="danger">取消</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>
<script>
import {getDepart,getManagerList,addDepartment,getDepartInfo,updateDepartment,delDepart} from '@/api/department'
import {treeData} from '@/utils/tool'
export default {
  name: 'departIndex',

  data() {
    return {
        departList:[],
        departFlag:false,
        mangerList:[],//部门负责人列表
        departForm:{ //表单绑定数据
          code: "", // 编码 
          introduce: "",  //描述
          managerId: 1, //负责人id
          name: "", //名称
          pid: "",  //部门id
        },
        rules:{ //表单验证
          code:[{required:true,message:'请输入编码',trigger:'blur'}],
          name:[{required:true,message:'请输入名称',trigger:'blur'}],
          managerId:[{required:true,message:'请选择负责人',trigger:'change'}],
          introduce:[{required:true,message:'请输入描述',trigger:'blur'}],
        }
    };
  },
  created(){
    this.getDepartList();
    this.getManager()
  },
  mounted() {
    
  },

  methods: { 
    async toDel(id){ //删除接口
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            let res =await delDepart(id) //删除接口
            console.log(res,"-------")
            this.getDepartList()
        }).catch(() => {

        });
    },
    async toSave(){ //添加部门接口
      this.$refs.departForm.validate(async (vali)=>{
          if(vali){
              if(this.departForm.id){//有id 修改接口
                  let editRes=await updateDepartment(this.departForm)
                  this.$message.success("修改成功")
              }else{//添加接口
                   let res=await addDepartment(this.departForm)
                  console.log(res,"添加部门接口")
            
                  this.$message.success("添加成功")
              }
            
            }
      })
       this.getDepartList();
      this.$refs.departForm.resetFields();//重置表单
      this.departFlag=false;
   
    },
    handleCommand(command){//下拉菜单的点击触发事件
      // command  每个菜单的 command 属性
      console.log(command,"----command")
      if(command.sta=='add'){
        this.departFlag=true;
        this.departForm.pid=command.id; //添加的需要的父级 id
      }
      if(command.sta=='edit'){ //编辑
             this.departFlag=true;
            // 获取部门详情接口  回显
            getDepartInfo(command.id).then(res=>{
                console.log(res,"-077777777")
                this.departForm=res.data;
                
            })
      }
      if(command.sta=='del'){//删除
        this.toDel(command.id)
       }
    },
    async getDepartList(){
      let res=await getDepart();
      console.log(res,"----获取部门列表")
      this.departList=treeData(res.data,0)
    },
    async getManager(){ 
      let res=await   getManagerList();
      console.log(res,"-----获取负责人列表")
          this.mangerList=res.data;
    },
  
    tosend(node,data){
        console.log(node,data,"-----点击了")
    },
    async getDepartList(){ //获取部门列表
      const res=await getDepart();
      console.log(res,"-----部门-----")
      this.departList=treeData(res.data)//存储处理好的树形数据
  
    }
  },
};
</script>
<style lang="scss">
    .custom-tree-node{
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
    
    }
</style>